<template>
  <div class="container">
        <v-header :seller="seller"></v-header>
      <div class="good">
          <div class="menu-wrapper" ref="menuWrapper">
            <ul class="menu">
              <li v-for="(item, index) in goods" :key="index" class="menu-item" :class="{'current':currentIndex === index}"
                  @click="selectMenu(index, $event)">
                <span class="text">
                  <span v-show="item.type>0" class=" icon" :class="classMap[item.type]"></span>{{item.name}}
                </span>
              </li>
            </ul>
          </div>
          <div class="foods-wrapper" ref="foodWrapper">
            <ul>
              <li v-for="(item, index) in goods" :key="index" class="food-list food-list-hook">
                <h1 class="title">{{item.name}}</h1>
                <ul>
                  <li v-for="(food ,index) in item.foods" :key="index" class="food-item" @click="selectFood(food, $event)">
                    <div class="icon">
                      <img :src="food.icon" alt="" width="57">
                    </div>
                    <div class="content">
                      <h2 class="name">{{food.name}}</h2>
                      <p class="desc">{{food.description}}</p>
                      <div class="price">
                        <span class="now">${{food.price}}</span><span class="old" v-show="food.oldPrice">${{food.oldPrice}}</span>
                      </div>
                      <div class="cartControl-wrapper">
                        <cart-control :food="food" :isShowdes="false" @increment="incrementTotal($event, food)"></cart-control>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div>
          <shopCart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice"
                    :min-price="seller.minPrice" ref="shopCart"></shopCart>
          <food-detail :food="selectedFood" ref="food"></food-detail>
    </div>
  </div>
  </div>
</template>
<script type="text/ecmascript-6">
import header from "../header/header.vue";
import BScroll from "better-scroll";
import shopCart from "../shopcart/shopCart.vue";
import cartControl from "../cartControl/cartControl.vue";
import foodDetail from "../foodDetail/food.vue";
import { urlParse } from "../../common/js/util";
const ERR_OK = 0;
export default {
  props: {},
  data() {
    return {
      seller: {},
      goods: [],
      menuScroll: null,
      foodScroll: null,
      listHeight: [],
      scrolly: 0,
      selectedFood: {},
      store_id: urlParse("store_id"),
      desk_id: urlParse("desk_id")
    };
  },
  created() {
    console.log(this.store_id, this.desk_id, this);
    let url = `${this.root}api2/catalog/menu/index2?store_id=${
      this.store_id
    }&desk_id=${this.desk_id}`;
    this.$http.get(url).then(response => {
      response = response.data;
      if (response.code === 1) {
        let access_token = response.access_token;
        localStorage.access_token = access_token;
        this.goods = response.data.goods;
        this.seller = response.data.seller;
        this.$store.commit("setSeller", this.seller);
        document.title = this.seller.name;
        this.$nextTick(() => {
          this._initScroll();
          this._calculateHeight();
        });
        // 隐藏加载条
        this.hideLoading();
      }
    });
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
  },
  mounted() {
      // this.$nextTick(()=>{
      //   this._initScroll();
      //   this._calculateHeight();
      // })
  },
  computed: {
    root() {
      return this.$store.state.rootApi;
    },
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrolly >= height && this.scrolly < height2)) {
          return i;
        }
      }
      return 0;
    },
    selectFoods() {
      return this.$store.getters.selectedFoods;
    }
  },
  methods: {
    _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        });
        this.foodScroll = new BScroll(this.$refs.foodWrapper, {
          probeType: 3,
          click: true
        });
        this.menuScroll.refresh();
        this.foodScroll.refresh();
        this.foodScroll.on("scroll", pos => {
          this.scrolly = Math.abs(Math.round(pos.y));
        });
    },
    _calculateHeight() {
      let foodList = this.$refs.foodWrapper.getElementsByClassName(
        "food-list-hook"
      );
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight - 10;
        console.log("item" + i, height);
        this.listHeight.push(height);
      }
    },
    hideLoading() {
      this.$store.commit("setShow", { target: "loading", status: false });
    },
    selectMenu(index, event) {
      console.log(index);
      if (!event._constructed) {
        // 去掉自带click事件的点击
        return;
      }
      let foodList = this.$refs.foodWrapper.getElementsByClassName(
        "food-list-hook"
      );
      let el = foodList[index];
      this.foodScroll.scrollToElement(el, 300);
    },
    selectFood(food, event) {
      if (!event._constructed) {
        // 去掉自带click事件的点击
        return;
      }
      this.selectedFood = food;
      this.$refs.food.show();
    },
    incrementTotal(target, good) {
      this.$store.commit("setTarget", target);
      this.$refs.shopCart.drop(target);
    }
  },
  components: {
    shopCart,
    cartControl,
    "food-detail": foodDetail,
    "v-header": header
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import 'goods.styl';
</style>
